<template>
  <div>
    <!-- header -->
    <div style="height: 70px; line-height: 70px; border-bottom: 1px solid #eee">
      <el-row>
        <el-col :span="3" :offset="4">
          <img :src="getImageUrl('logo1.png')" alt=""
               style="width: 120px; height: 40px; display: block; margin-top: 15px">
        </el-col>

        <el-col :span="13" style="text-align: right">
          <span class="item">注册</span>
        </el-col>
      </el-row>
    </div>

    <el-row>
      <el-col :span="16" :offset="4">
        <h1 style="margin-top: 100px; text-align: left">经常登录的同志是好同志</h1>
        <div style="width: 500px; margin: 50px auto">
          <div style="margin: 30px 0; display: flex; align-items: center">
            <span style="margin-right: 10px;">账号</span>
            <input v-model="state.user.username" placeholder="请输入用户名" type="text" style="border: 1px solid #eee; padding: 10px; flex: 1">
          </div>
          <div style="margin: 30px 0; display: flex; align-items: center">
            <span style="margin-right: 10px">密码</span>
            <input v-model="state.user.password" placeholder="请输入密码" type="password" style="border: 1px solid #eee; padding: 10px; flex: 1">
          </div>
          <div  style="margin: 30px 0">
            <button @click="login" style="padding: 10px; width: 100%; background-color: orangered; color: #fff; cursor: pointer; font-size: 16px">登录</button>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script setup>
import { reactive } from 'vue'
import request from "../utils/request";
import {ElMessage} from "element-plus";
import {useRouter} from 'vue-router'

let router = useRouter();

const state = reactive({
  user: {
    username: '',
    password: ''
  }
})

const getImageUrl = (name) => {
  return new URL(`../assets/${name}`, import.meta.url).href
}

const login = () => {
  request.post("/user/login", state.user).then(res => {
    if (res.code === 200){
      ElMessage.success("登录成功")
      router.push("/")
      localStorage.setItem("user", JSON.stringify(res.data))
    } else {
      ElMessage.error(res.msg)
    }
  })
}

</script>

<style>

</style>
